import React ,{useEffect,useRef}from 'react'
import {EyeOutlined} from '@ant-design/icons';
import '../../assets/Video/Video.scss'
function Video(props:any) {

    const videoRef=useRef<HTMLVideoElement>(null);
    useEffect(()=>{
        // 处理鼠标移入 事情
        const handleMouseOver=()=>{
            if(videoRef.current){
                videoRef.current.play();
            }
        };
        // 处理鼠标移出事件 
        const handleMouseOut=()=>{
            if(videoRef.current){
                videoRef.current.pause();
            }
        }
          // 获取video元素
        const videoELement=videoRef.current;
        if(videoELement){
            // 添加鼠标移入事件监听
            videoELement.addEventListener('mouseenter',handleMouseOver);
             // 添加鼠标移出事件监听
            videoELement.addEventListener('mouseleave',handleMouseOut);
            return()=>{
                // 移除事件监听
                videoELement.removeEventListener('mouseenter',handleMouseOver)
                videoELement.removeEventListener('mouseleave',handleMouseOut)
            }
        }


    },[])

  return (
    <div className='Video'>
      <div className='Video_box'>
        <video ref={videoRef} width={185} src={props.VideoList.url}></video>
      </div>
      <div className='Video_Info'>
            <p>{props.VideoList.title}</p>
            <div className='Video_user'>
                <div className='Video_info_user'>
                    <img width={20} src={props.VideoList.avatar} alt="" />
                    <span>{props.VideoList.name}</span>
                </div>
                <span><EyeOutlined/>{props.VideoList.num}</span>
            </div>
      </div>
      <div className='Video_type'>视频</div>
    </div>
  )
}

export default Video
